<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项brush-区域选择</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>

  <script>
    let xAxisData = [] // x轴数据
    let data1 = []
    let data2 = []
    let data3 = []
    let data4 = []
    for (let i = 0; i< 10; i++) {
      xAxisData.push('Class' + i)
      data1.push((Math.random() * 2).toFixed(2))
      data2.push(-(Math.random()).toFixed(2))
      data3.push((Math.random() * 5).toFixed(2))
      data4.push((Math.random() + 0.3).toFixed(2))
    }

    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      legend: {
        left: 'left',
      },
      tooltip: {},
      grid: {
        left: 100,
      },
      xAxis: {
        name: 'X 轴',
        data: xAxisData,
      },
      yAxis: {
        inverse: true, // 让数据倒过来
      },
      visualMap: { // 视觉映射组件
        type: 'continuous',
        text: ['high', 'low'],
        inverse: true, // 因为y轴倒过来了，所以这里也得一致
        top: 60,
        left: 10,
        calculable: true, // 滑块
        itemHeight: 200,
        min: -2,
        max: 6,
        inRange: {
          colorLightness: [0.4,0.8],
        },
        outOfRange: {
          color: '#bbb',
        },
        controller: {
          inRange: {
            color: '#2f4554'
          },
        },
      },
      // toolbox: {
      //   feature: { // 设置方式一，在toolbox中把brush配出来
      //     brush: ['rect','polygon','lineX', 'lineY', 'keep', 'clear']
      //   },
      // },
      brush: {  // 设置方式二，全局设置brush
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        brushLink: 'none',
        // seriesIndex: [0,1],
        xAxisIndex: '0', // 根据轴索引来控制刷选，而且刷选区域会随着dataZoom 的缩放而变化以保证刷选区域不会超出轴的范围，如果不设置，当缩放的时候框选范围会不是我们想要的
        // yAxisIndex: '',
        brushType: 'polygon', // 貌似不会生效
        brushMode: 'single',
        throttleType: 'debounce',
      },
      dataZoom: { type: 'inside' },
      series: [
        {
          name: 'bar1',
          type: 'bar',
          data: data1,
          stack: 'one', // stack 是堆叠，值一样的堆叠一起
        },
        {
          name: 'bar2',
          type: 'bar',
          data: data2,
          stack: 'one', // stack 是堆叠，值一样的堆叠一起
        },
        {
          name: 'bar3',
          type: 'bar',
          data: data3,
          stack: 'two',
        },
        {
          name: 'bar4',
          type: 'bar',
          data: data4,
          stack: 'two',
        },
      ],
    })

    myChart1.on('brushselected', function (params) {
      console.log(params)
      let brushed = []
      let selected = params.batch[0].selected

      for (let i = 0; i < selected.length; i++) {
        let dataIndex = selected[i].dataIndex
        brushed.push('[series ' + i + '] ' + dataIndex.join(', '))
      }
      console.log(124, brushed)

      myChart1.setOption({
        title: {
          backgroundColor: '#333',
          text: '选中数据的索引：\n' + brushed.join('\n'),
          bottom: 0,
          right: 0,
          width: 100,
          textStyle: {
            fontSize: 12,
            color: '#fff',
          }
        }
      })
    })

  </script>
</body>
</html>